<template>
	<view class="service-page">
		<view class="page-title">联系客服</view>
		<!-- 聊天内容区域 -->
		<scroll-view 
			class="chat-container" 
			scroll-y 
			:scroll-top="scrollTop"
			@scrolltoupper="loadMoreMessages"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="message-list">
				<template v-for="(group, date) in groupedMessages" :key="date">
					<!-- 日期分割线 -->
					<view class="date-divider">{{ date }}</view>
					<!-- 消息列表 -->
					<view 
						v-for="(message, index) in group" 
						:key="index" 
						class="message-item"
						:class="{'message-right': message.type === 'user'}"
					>
						<image 
							class="avatar" 
							:src="message.type === 'service' ? '/static/images/service-avatar.png' : '/static/images/avatar.png'"
						/>
						<view class="message-content">
							<!-- 普通文本消息 -->
							<view v-if="!isOrderMessage(message.content)" class="message-text">{{ message.content }}</view>
							<!-- 订单消息 -->
							<view v-else class="order-message" @tap="showOrderDetail(parseOrderMessage(message.content))">
								<view class="order-card">
									<view class="order-header">
										<text class="order-title">订单信息</text>
										<text class="order-status">{{ parseOrderMessage(message.content).orderStatus }}</text>
									</view>
									<view class="order-info">
										<view class="order-row">
											<text class="order-label">订单号：</text>
											<text class="order-value">{{ parseOrderMessage(message.content).orderNumber }}</text>
										</view>
										<view class="order-row">
											<text class="order-label">下单时间：</text>
											<text class="order-value">{{ parseOrderMessage(message.content).orderTime }}</text>
										</view>
										<view class="order-row">
											<text class="order-label">总金额：</text>
											<text class="order-value">¥{{ parseOrderMessage(message.content).totalAmount }}</text>
										</view>
									</view>
									<view class="order-tip">点击查看详情</view>
								</view>
							</view>
							<view class="message-time">{{ message.time }}</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>

		<!-- 底部输入区域 -->
		<view class="input-area">
			<view class="more-btn" @tap="showMoreOptions">
				<image src="/static/mine/service-more.jpg" class="add-icon" mode="aspectFit"></image>
			</view>
			<view class="input-box">
				<input 
					type="text" 
					v-model="inputMessage"
					placeholder="说点什么吧..."
					@confirm="sendMessage"
				/>
			</view>
			<view class="action-buttons">
				<view class="send-btn" @tap="sendMessage">发送</view>
			</view>
		</view>

		<!-- 更多选项弹出层 -->
		<view class="more-panel" v-if="showMorePanel" @tap="closeMorePanel">
			<view class="more-mask"></view>
			<view class="more-content" @tap.stop>
				<view class="more-grid">
					<view class="grid-item" v-for="(item, index) in moreOptions" :key="index" @tap="handleMoreOption(item)">
						<view class="grid-icon">
							<image :src="`https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/${item.icon}`" mode="aspectFit"></image>
						</view>
						<text class="grid-text">{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单选择面板 -->
		<view class="order-panel" v-if="showOrderPanel" @tap="closeOrderPanel">
			<view class="order-mask"></view>
			<view class="order-content">
				<view class="order-list">
					<view class="order-item" v-for="(order, index) in userOrders" :key="index" @tap="selectOrder(order)">
						<view class="order-info">
							<view class="order-number">{{ order.orderNumber }}</view>
							<view class="order-time">{{ order.orderTime }}</view>
						</view>
						<view class="order-status">{{ order.orderStatus }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单详情弹窗 -->
		<view class="order-detail-modal" v-if="showOrderDetailModal" @tap="closeOrderDetailModal">
			<view class="detail-mask"></view>
			<view class="detail-content" @tap.stop>
				<view class="detail-header">
					<text class="detail-title">订单详情</text>
					<text class="detail-close" @tap="closeOrderDetailModal">×</text>
				</view>
				<scroll-view class="detail-body" scroll-y>
					<view class="detail-section">
						<view class="section-title">基本信息</view>
						<view class="detail-row">
							<text class="detail-label">订单号：</text>
							<text class="detail-value">{{ currentOrderDetail.orderNumber }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">下单时间：</text>
							<text class="detail-value">{{ currentOrderDetail.orderTime }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">订单状态：</text>
							<text class="detail-value status-text">{{ currentOrderDetail.orderStatus }}</text>
						</view>
						<view class="detail-row" v-if="currentOrderDetail.paymentMethod">
							<text class="detail-label">支付方式：</text>
							<text class="detail-value">{{ currentOrderDetail.paymentMethod }}</text>
						</view>
						<view class="detail-row" v-if="currentOrderDetail.remark">
							<text class="detail-label">订单备注：</text>
							<text class="detail-value">{{ currentOrderDetail.remark }}</text>
						</view>
					</view>
					
					<view class="detail-section" v-if="currentOrderDetail.items && currentOrderDetail.items.length > 0">
						<view class="section-title">菜品信息</view>
						<view class="dish-list">
							<view class="dish-item" v-for="(dish, index) in currentOrderDetail.items" :key="index">
								<view class="dish-main">
									<view class="dish-info">
										<text class="dish-name">{{ dish.dishName }}</text>
									</view>
									<view class="dish-quantity-price">
										<text class="dish-quantity">x{{ dish.quantity }}</text>
										<text class="dish-price">¥{{ dish.price }}</text>
									</view>
								</view>
								<view class="dish-subtotal">
									<text class="subtotal-text">总计：¥{{ (dish.price * dish.quantity).toFixed(2) }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="detail-section">
						<view class="section-title">费用明细</view>
						<view class="cost-list">
							<view class="cost-item" v-if="currentOrderDetail.subtotal">
								<text class="cost-label">菜品总额：</text>
								<text class="cost-value">¥{{ currentOrderDetail.subtotal }}</text>
							</view>
							<view class="cost-item" v-if="currentOrderDetail.deliveryFee">
								<text class="cost-label">配送费：</text>
								<text class="cost-value">¥{{ currentOrderDetail.deliveryFee }}</text>
							</view>
							<view class="cost-item" v-if="currentOrderDetail.discount">
								<text class="cost-label">优惠金额：</text>
								<text class="cost-value discount-text">-¥{{ currentOrderDetail.discount }}</text>
							</view>
							<view class="cost-item total-item">
								<text class="cost-label">实付金额：</text>
								<text class="cost-value total-text">¥{{ currentOrderDetail.totalAmount }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'
import { orderApi } from '../../api/index.js'

// 消息列表
const messages = ref([])
// 当前用户ID（从本地存储获取）
const currentUserId = ref('')
// 客服ID
const serviceId = ref('service_001')
// 是否正在加载历史消息
const isLoadingHistory = ref(false)
// 是否正在发送消息
const isSending = ref(false)
// 是否正在刷新
const isRefreshing = ref(false)
// 更多选项面板显示状态
const showMorePanel = ref(false)
// 订单选择面板显示状态
const showOrderPanel = ref(false)
// 用户订单列表
const userOrders = ref([])
// 是否正在加载订单
const isLoadingOrders = ref(false)
// 输入框内容
const inputMessage = ref('')
// 滚动位置
const scrollTop = ref(0)
// 轮询定时器
let pollTimer = null
// 最后一条消息的时间戳
let lastMessageTime = 0
// 订单详情弹窗显示状态
const showOrderDetailModal = ref(false)
// 当前显示的订单详情
const currentOrderDetail = ref({})

// 更多选项数据
const moreOptions = ref([
	{
		icon: '/static/images/icons/picture.png',
		text: '图片',
		type: 'image'
	},
	{
		icon: '/static/images/icons/camera.png',
		text: '拍摄',
		type: 'camera'
	},
	{
		icon: '/static/images/icons/order.png',
		text: '订单',
		type: 'order'
	},
	{
		icon: '/static/images/icons/location.png',
		text: '位置',
		type: 'location'
	}
])

// 格式化时间
const formatTime = (time) => {
	return time.split(' ')[1] // 只返回时间部分
}

// 按日期分组消息
const groupedMessages = computed(() => {
	const groups = {}
	messages.value.forEach(message => {
		const date = message.time.split(' ')[0] // 提取日期部分
		if (!groups[date]) {
			groups[date] = []
		}
		groups[date].push({
			...message,
			time: formatTime(message.time) // 只保留时间部分
		})
	})
	return groups
})

// 获取历史消息
const fetchHistoryMessages = async () => {
	try {
		const response = await uni.request({
			url: 'http://192.168.29.125:8080/api/messages',
			method: 'GET',
			data: {
				sender: currentUserId.value.toString(),
				receiver: serviceId.value
			}
		})
		
		if (response.statusCode === 200 && response.data.code === 200 && response.data.data) {
			// 先对原始数据按时间戳排序
			const sortedData = [...response.data.data].sort((a, b) => a.sendTime - b.sendTime)
			console.log('排序后的原始数据:', sortedData)
			
			// 更新最后一条消息的时间戳
			if (sortedData.length > 0) {
				lastMessageTime = sortedData[sortedData.length - 1].sendTime
			}
			
			// 清空旧消息并添加新消息
			messages.value = sortedData.map(msg => ({
				type: msg.sender === currentUserId.value.toString() ? 'user' : 'service',
				content: msg.content,
				time: new Date(msg.sendTime).toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'long',
					day: 'numeric',
					hour: '2-digit',
					minute: '2-digit'
				})
			}))
			console.log('格式化后的消息:', messages.value)
			
			// 滚动到底部
			scrollToBottom()
		}
	} catch (error) {
		console.error('获取历史消息失败:', error)
	}
}

// 发送消息
const sendMessage = async () => {
	if (!inputMessage.value.trim()) {
		uni.showToast({
			title: '消息不能为空',
			icon: 'none'
		})
		return
	}

	if (isSending.value) return
	isSending.value = true

	try {
		// 先添加到本地消息列表
		const newMessage = {
			type: 'user',
			content: inputMessage.value,
			time: new Date().toLocaleString('zh-CN', {
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			})
		}
		messages.value.push(newMessage)
		inputMessage.value = ''
		scrollToBottom()

		// 发送到服务器
		const response = await uni.request({
			url: 'http://192.168.29.125:8080/api/messages',
			method: 'POST',
			data: {
				sender: currentUserId.value.toString(),
				receiver: serviceId.value,
				content: newMessage.content,
				sendTime: new Date()
			},
			header: {
				'content-type': 'application/json'
			}
		})

		if (response.statusCode !== 200) {
			throw new Error('发送失败')
		}

		// 更新最后一条消息的时间戳
		lastMessageTime = new Date().getTime()
	} catch (error) {
		console.error('发送消息失败:', error)
		uni.showToast({
			title: '发送失败，请重试',
			icon: 'none'
		})
		// 发送失败时从列表中移除消息
		messages.value.pop()
	} finally {
		isSending.value = false
	}
}

// 轮询获取新消息
const pollNewMessages = async () => {
	try {
		const response = await uni.request({
			url: 'http://192.168.29.125:8080/api/messages',
			method: 'GET',
			data: {
				sender: currentUserId.value.toString(),
				receiver: serviceId.value
			}
		})
		
		if (response.statusCode === 200 && response.data.code === 200 && response.data.data) {
			// 先对原始数据按时间戳排序（从小到大，与首次获取保持一致）
			const sortedData = [...response.data.data].sort((a, b) => {
				// 确保使用数字类型的时间戳进行比较
				const timeA = typeof a.sendTime === 'string' ? new Date(a.sendTime).getTime() : a.sendTime
				const timeB = typeof b.sendTime === 'string' ? new Date(b.sendTime).getTime() : b.sendTime
				return timeA - timeB
			})
			
			if (sortedData.length > 0) {
				// 更新最后一条消息的时间戳
				const lastMsg = sortedData[sortedData.length - 1]
				lastMessageTime = typeof lastMsg.sendTime === 'string' ? 
					new Date(lastMsg.sendTime).getTime() : lastMsg.sendTime
				
				// 清空旧消息并添加所有消息
				messages.value = sortedData.map(msg => ({
					type: msg.sender === currentUserId.value.toString() ? 'user' : 'service',
					content: msg.content,
					time: new Date(msg.sendTime).toLocaleString('zh-CN', {
						year: 'numeric',
						month: 'long',
						day: 'numeric',
						hour: '2-digit',
						minute: '2-digit'
					})
				}))
				
				// 滚动到底部
				scrollToBottom()
			}
		}
	} catch (error) {
		console.error('轮询新消息失败:', error)
	}
}

// 开始轮询
const startPolling = () => {
	// 每3秒轮询一次
	pollTimer = setInterval(pollNewMessages, 3000)
}

// 停止轮询
const stopPolling = () => {
	if (pollTimer) {
		clearInterval(pollTimer)
		pollTimer = null
	}
}

// 滚动到底部
const scrollToBottom = () => {
	nextTick(() => {
		const query = uni.createSelectorQuery()
		query.select('.message-list').boundingClientRect()
		query.select('.chat-container').boundingClientRect()
		query.exec(([messageList, chatContainer]) => {
			if (messageList && chatContainer) {
				scrollTop.value = messageList.height - chatContainer.height
			}
		})
	})
}

// 加载更多消息
const loadMoreMessages = async () => {
	if (isLoadingHistory.value) return
	
	isLoadingHistory.value = true
	await fetchHistoryMessages()
	isLoadingHistory.value = false
}

// 下拉刷新
const onRefresh = async () => {
	isRefreshing.value = true
	await fetchHistoryMessages()
	isRefreshing.value = false
}

// 显示更多选项
const showMoreOptions = () => {
	showMorePanel.value = true
}

// 关闭更多选项面板
const closeMorePanel = () => {
	showMorePanel.value = false
}

// 处理更多选项点击
const handleMoreOption = async (item) => {
	switch(item.type) {
		case 'image':
			uni.chooseImage({
				count: 9,
				success: async (res) => {
					// TODO: 上传图片并发送图片消息
					console.log('选择图片', res.tempFilePaths)
				}
			})
			closeMorePanel()
			break
		case 'camera':
			uni.chooseImage({
				count: 1,
				sourceType: ['camera'],
				success: async (res) => {
					// TODO: 上传拍摄的照片并发送图片消息
					console.log('拍摄照片', res.tempFilePaths)
				}
			})
			closeMorePanel()
			break
		case 'order':
			// 获取用户订单并显示选择面板
			closeMorePanel() // 先关闭更多选项面板
			await fetchUserOrders()
			showOrderPanel.value = true
			break
		case 'location':
			uni.chooseLocation({
				success: async (res) => {
					// TODO: 发送位置消息
					console.log('选择位置', res)
				}
			})
			closeMorePanel()
			break
	}
}

// 获取用户订单
const fetchUserOrders = async () => {
	if (isLoadingOrders.value) return
	
	isLoadingOrders.value = true
	try {
		const response = await orderApi.getOrdersByDate(null) // 获取所有订单
		
		if (response.code === 200 && response.data) {
			// 筛选当前用户的订单
			const userOrderList = response.data.filter(order => 
				order.customerOrder && order.customerOrder.uId == currentUserId.value
			)
			
			// 按订单ID分组，去重
			const orderMap = new Map()
			userOrderList.forEach(order => {
				const orderId = order.customerOrder.orderId
				if (!orderMap.has(orderId)) {
					// 创建新的订单对象
					orderMap.set(orderId, {
						orderId: order.customerOrder.orderId,
						orderNumber: order.customerOrder.orderNumber || `订单${order.customerOrder.orderId}`,
						orderTime: new Date(order.customerOrder.placeOrderTime).toLocaleString('zh-CN'),
						orderStatus: getOrderStatusText(order.customerOrder.orderStatus),
						totalAmount: order.customerOrder.payableAmount || 0,
						subtotal: order.customerOrder.totalAmount || 0,
						deliveryFee: order.customerOrder.deliveryFee || 0,
						discount: order.customerOrder.discount || 0,
						paymentMethod: order.customerOrder.paymentMethod || '未知',
						remark: order.customerOrder.remark || '',
						items: []
					})
				}
				
				// 添加菜品信息
				if (order.dishes && order.dishes.length > 0) {
					const dishItem = {
						dishId: order.dishes[0].dishId,
						dishName: order.dishes[0].dishName,
						description: order.dishes[0].dishDescribe || '',
						quantity: order.customerOrderItem.quantity,
						price: order.dishes[0].price,
						subtotal: (order.dishes[0].price * order.customerOrderItem.quantity).toFixed(2)
					}
					orderMap.get(orderId).items.push(dishItem)
				}
			})
			
			// 转换为数组
			userOrders.value = Array.from(orderMap.values())
		}
	} catch (error) {
		console.error('获取用户订单失败:', error)
		uni.showToast({
			title: '获取订单失败',
			icon: 'none'
		})
	} finally {
		isLoadingOrders.value = false
	}
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
	// 处理枚举值
	const statusMap = {
		'TO_BE_PAID': '待支付',
		'PAID': '已支付',
		'CANCELED': '已取消',
		// 兼容数字状态
		0: '待确认',
		1: '已确认',
		2: '制作中',
		3: '已完成',
		4: '已取消'
	}
	return statusMap[status] || '未知状态'
}

// 选择订单
const selectOrder = async (order) => {
	try {
		// 构建订单消息内容
		const orderMessage = {
			type: 'order',
			orderId: order.orderId,
			orderNumber: order.orderNumber,
			orderTime: order.orderTime,
			orderStatus: order.orderStatus,
			totalAmount: order.totalAmount,
			subtotal: order.subtotal,
			deliveryFee: order.deliveryFee,
			discount: order.discount,
			paymentMethod: order.paymentMethod,
			remark: order.remark,
			items: order.items || [] // 添加菜品信息
		}
		
		// 发送订单消息
		await sendOrderMessage(orderMessage)
		
		// 关闭订单选择面板
		showOrderPanel.value = false
	} catch (error) {
		console.error('发送订单消息失败:', error)
		uni.showToast({
			title: '发送订单失败',
			icon: 'none'
		})
	}
}

// 发送订单消息
const sendOrderMessage = async (orderMessage) => {
	if (isSending.value) return
	isSending.value = true

	try {
		// 构建消息内容（JSON字符串）
		const messageContent = JSON.stringify(orderMessage)
		
		// 先添加到本地消息列表
		const newMessage = {
			type: 'user',
			content: messageContent,
			time: new Date().toLocaleString('zh-CN', {
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			})
		}
		messages.value.push(newMessage)
		scrollToBottom()

		// 发送到服务器
		const response = await uni.request({
			url: 'http://192.168.29.125:8080/api/messages',
			method: 'POST',
			data: {
				sender: currentUserId.value.toString(),
				receiver: serviceId.value,
				content: messageContent,
				sendTime: new Date()
			},
			header: {
				'content-type': 'application/json'
			}
		})

		if (response.statusCode !== 200) {
			throw new Error('发送失败')
		}

		// 更新最后一条消息的时间戳
		lastMessageTime = new Date().getTime()
	} catch (error) {
		console.error('发送订单消息失败:', error)
		uni.showToast({
			title: '发送失败，请重试',
			icon: 'none'
		})
		// 发送失败时从列表中移除消息
		messages.value.pop()
		throw error
	} finally {
		isSending.value = false
	}
}

// 关闭订单选择面板
const closeOrderPanel = () => {
	showOrderPanel.value = false
}

// 测试订单面板
const testOrderPanel = async () => {
	console.log('测试订单面板')
	await fetchUserOrders()
	showOrderPanel.value = true
	console.log('订单面板显示状态:', showOrderPanel.value)
}

// 判断是否为订单消息
const isOrderMessage = (content) => {
	try {
		const parsed = JSON.parse(content)
		return parsed.type === 'order'
	} catch (error) {
		return false
	}
}

// 解析订单消息
const parseOrderMessage = (content) => {
	try {
		return JSON.parse(content)
	} catch (error) {
		console.error('解析订单消息失败:', error)
		return {}
	}
}

// 显示订单详情
const showOrderDetail = (orderData) => {
	showOrderDetailModal.value = true
	currentOrderDetail.value = orderData
}

// 关闭订单详情弹窗
const closeOrderDetailModal = () => {
	showOrderDetailModal.value = false
}

// 页面加载完成后初始化
onMounted(async () => {
	console.log('联系客服页面加载')
	// 设置当前用户ID（从token获取）
	const token = uni.getStorageSync('token')
	currentUserId.value = token || '1' // 如果没有token，使用默认值1
	
	// 加载历史消息
	await fetchHistoryMessages()
	
	// 开始轮询
	startPolling()
	
	// 滚动到底部
	scrollToBottom()
})

// 页面卸载时清理
onUnmounted(() => {
	stopPolling()
})
</script>

<style lang="scss" scoped>
.service-page {
	padding: 20rpx;
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.test-btn {
		background-color: #007AFF;
		color: #fff;
		padding: 20rpx;
		text-align: center;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.chat-container {
	flex: 1;
	padding: 20rpx;
	overflow-y: auto;
}

.message-list {
	padding-bottom: 20rpx;
}

.message-item {
	display: flex;
	margin-bottom: 30rpx;
	align-items: flex-start;

	&.message-right {
		flex-direction: row-reverse;

		.message-content {
			margin-right: 20rpx;
			margin-left: 0;

			.message-text {
				background-color: #007AFF;
				color: #fff;
				border-radius: 20rpx 4rpx 20rpx 20rpx;
			}
		}
	}
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #eee;
}

.message-content {
	margin-left: 20rpx;
	max-width: 70%;
}

.message-text {
	padding: 20rpx;
	background-color: #fff;
	border-radius: 4rpx 20rpx 20rpx 20rpx;
	font-size: 28rpx;
	word-break: break-all;
}

.message-time {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.input-area {
	background-color: #fff;
	padding: 20rpx;
	border-top: 2rpx solid #eee;
	display: flex;
	align-items: center;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.more-btn {
	width: 72rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	
	.add-icon {
		width: 48rpx;
		height: 48rpx;
	}
}

.input-box {
	flex: 1;
	background-color: #f5f5f5;
	border-radius: 36rpx;
	padding: 0 30rpx;
	margin-right: 20rpx;

	input {
		height: 72rpx;
		font-size: 28rpx;
	}
}

.action-buttons {
	.send-btn {
		background-color: #007AFF;
		color: #fff;
		padding: 16rpx 40rpx;
		border-radius: 36rpx;
		font-size: 28rpx;
	}
}

// 添加日期分割线样式
.date-divider {
	text-align: center;
	padding: 20rpx 0;
	font-size: 24rpx;
	color: #999;
	position: relative;
	margin: 20rpx 0;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 25%;
		height: 1rpx;
		background-color: #e5e5e5;
	}

	&::before {
		left: 15%;
	}

	&::after {
		right: 15%;
	}
}

// 更多选项面板样式
.more-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
}

.more-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.more-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f5f5f5;
	padding: 30rpx 20rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	border-radius: 20rpx 20rpx 0 0;
	transform: translateY(0);
	transition: transform 0.3s;
}

.more-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0;
}

.grid-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
}

.grid-icon {
	width: 100rpx;
	height: 100rpx;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.grid-text {
	font-size: 24rpx;
	color: #333;
}

// 订单消息样式
.order-message {
	.message-right & {
		.order-card {
			background-color: #007AFF;
			color: #fff;
		}
	}
}

.order-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	border: 1rpx solid #eee;
	max-width: 100%;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.order-title {
	font-size: 28rpx;
	font-weight: bold;
}

.order-status {
	font-size: 24rpx;
	color: #007AFF;
	background-color: rgba(0, 122, 255, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.message-right .order-status {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.2);
}

.order-info {
	margin-bottom: 12rpx;
}

.order-row {
	display: flex;
	margin-bottom: 8rpx;
}

.order-label {
	font-size: 24rpx;
	color: #666;
	width: 120rpx;
}

.message-right .order-label {
	color: rgba(255, 255, 255, 0.8);
}

.order-value {
	font-size: 24rpx;
	color: #333;
	flex: 1;
}

.message-right .order-value {
	color: #fff;
}

.order-tip {
	font-size: 22rpx;
	color: #999;
	text-align: center;
	padding-top: 8rpx;
	border-top: 1rpx solid #eee;
}

.message-right .order-tip {
	color: rgba(255, 255, 255, 0.7);
	border-top-color: rgba(255, 255, 255, 0.2);
}

// 订单选择面板样式
.order-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
}

.order-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.order-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f5f5f5;
	padding: 30rpx 20rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	border-radius: 20rpx 20rpx 0 0;
	transform: translateY(0);
	transition: transform 0.3s;
}

.order-list {
	max-height: 500rpx;
	overflow-y: auto;
}

.order-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.order-info {
	display: flex;
	flex-direction: column;
}

.order-number {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.order-time {
	font-size: 24rpx;
	color: #999;
}

.order-status {
	font-size: 24rpx;
	color: #007AFF;
}

// 订单详情弹窗样式
.order-detail-modal {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
}

.detail-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.detail-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	transform: translateY(0);
	transition: transform 0.3s;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx 20rpx;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
}

.detail-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.detail-close {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.detail-body {
	flex: 1;
	padding: 20rpx;
	background-color: #f8f8f8;
}

.detail-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
	padding-bottom: 12rpx;
	border-bottom: 1rpx solid #eee;
}

.detail-row {
	display: flex;
	margin-bottom: 12rpx;
	align-items: flex-start;
}

.detail-label {
	font-size: 26rpx;
	color: #666;
	width: 140rpx;
	flex-shrink: 0;
}

.detail-value {
	font-size: 26rpx;
	color: #333;
	flex: 1;
	word-break: break-all;
}

.status-text {
	color: #007AFF;
	font-weight: bold;
}

.price-text {
	color: #C70209;
	font-weight: bold;
}

.dish-list {
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 16rpx;
}

.dish-item {
	background-color: #fff;
	border-radius: 8rpx;
	padding: 16rpx;
	margin-bottom: 12rpx;
	border: 1rpx solid #eee;
}

.dish-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8rpx;
}

.dish-info {
	flex: 1;
}

.dish-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 4rpx;
}

.dish-desc {
	font-size: 24rpx;
	color: #999;
}

.dish-quantity-price {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.dish-quantity {
	font-size: 24rpx;
	color: #666;
	background-color: #f0f0f0;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.dish-price {
	font-size: 26rpx;
	color: #C70209;
	font-weight: bold;
}

.dish-subtotal {
	text-align: right;
	padding-top: 8rpx;
	border-top: 1rpx solid #f0f0f0;
}

.subtotal-text {
	font-size: 24rpx;
	color: #666;
}

.cost-list {
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 16rpx;
}

.cost-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.cost-label {
	font-size: 26rpx;
	color: #666;
}

.cost-value {
	font-size: 26rpx;
	color: #333;
}

.discount-text {
	color: #C70209;
}

.total-item {
	margin-top: 12rpx;
	padding-top: 12rpx;
	border-top: 1rpx solid #eee;
}

.total-text {
	color: #C70209;
	font-size: 28rpx;
	font-weight: bold;
}
</style>
